Material Grid List

Web Development - অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material) - Angular Material লেআউট |
2
2

Material Grid List হল Angular Material এর একটি কম্পোনেন্ট, যা একটি গ্রিড লেআউট তৈরি করতে সহায়ক। এটি কনটেন্ট বা উপাদানগুলোকে গ্রিড আকারে প্রদর্শন করতে ব্যবহৃত হয়। Grid List ব্যবহার করে আপনি সহজেই কাস্টমাইজযোগ্য এবং রেসপন্সিভ গ্রিড লেআউট তৈরি করতে পারেন।

Angular Material এর Grid List কন্ট্রোলটি একটি শৃঙ্খলাবদ্ধ কন্টেন্ট রেন্ডারিং সিস্টেম সরবরাহ করে, যা মূলত রেসপন্সিভ এবং আকর্ষণীয় ডিভাইস ব্যবহারের জন্য উপযুক্ত।


Material Grid List এর উপকারিতা

  • রেসপন্সিভ ডিজাইন: Grid List স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত হয়, বিশেষত মোবাইল, ট্যাবলেট এবং ডেস্কটপে।
  • কাস্টমাইজেশন সুবিধা: আপনি গ্রিডের সারি, কলাম এবং সেলের আকার কাস্টমাইজ করতে পারবেন।
  • সাধারণ গ্রিড লেআউট তৈরি: জটিল গ্রিড লেআউট তৈরি করার জন্য কম কোডের প্রয়োজন।

Material Grid List ব্যবহার করার ধাপ

১. Angular Material Grid List মডিউল ইমপোর্ট করা

প্রথমে, Angular Material এর Grid List মডিউল app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { MatGridListModule } from '@angular/material/grid-list';

@NgModule({
  imports: [
    MatGridListModule
  ]
})
export class AppModule { }

২. HTML ফাইলে Material Grid List ব্যবহার করা

এরপর, mat-grid-list ট্যাগটি ব্যবহার করে আপনার HTML ফাইলে Grid List তৈরি করুন। আপনি এখানে cols (কলাম সংখ্যা) এবং rowHeight (প্রতি সারির উচ্চতা) কাস্টমাইজ করতে পারেন।

<mat-grid-list cols="3" rowHeight="100px">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
  <mat-grid-tile>Tile 3</mat-grid-tile>
  <mat-grid-tile>Tile 4</mat-grid-tile>
  <mat-grid-tile>Tile 5</mat-grid-tile>
  <mat-grid-tile>Tile 6</mat-grid-tile>
</mat-grid-list>
  • cols: গ্রিডের কলামের সংখ্যা নির্ধারণ করে।
  • rowHeight: প্রতি সারির উচ্চতা নির্ধারণ করে, যা আপনি পিক্সেল (px), শতাংশ (%) বা অন্য কোনো ইউনিটে সেট করতে পারেন।

৩. কাস্টমাইজড Grid Tile

এছাড়াও, আপনি প্রতিটি mat-grid-tile এর মধ্যে কন্টেন্ট যোগ করতে পারেন, যেমন ছবি, টেক্সট বা অন্য উপাদান।

<mat-grid-list cols="4" rowHeight="200px">
  <mat-grid-tile>
    <img src="path/to/image1.jpg" alt="Image 1">
  </mat-grid-tile>
  <mat-grid-tile>
    <img src="path/to/image2.jpg" alt="Image 2">
  </mat-grid-tile>
  <mat-grid-tile>
    <div class="tile-content">
      <h3>Tile 3</h3>
      <p>Description for Tile 3</p>
    </div>
  </mat-grid-tile>
</mat-grid-list>

৪. রেসপন্সিভ Grid List

আপনি যদি রেসপন্সিভ গ্রিড তৈরি করতে চান, তাহলে media queries ব্যবহার করতে পারেন অথবা cols এর মান ডাইনামিকভাবে কন্ট্রোল করতে পারেন।

<mat-grid-list [cols]="gridCols" rowHeight="200px">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
  <mat-grid-tile>Tile 3</mat-grid-tile>
  <mat-grid-tile>Tile 4</mat-grid-tile>
</mat-grid-list>

এবং আপনার app.component.ts ফাইলে gridCols প্রপার্টি ডাইনামিকভাবে কনফিগার করুন:

export class AppComponent {
  gridCols: number;

  constructor() {
    this.setGridCols();
    window.onresize = () => this.setGridCols();
  }

  setGridCols() {
    if (window.innerWidth < 600) {
      this.gridCols = 1; // মোবাইল ডিভাইসে 1 কলাম
    } else if (window.innerWidth < 960) {
      this.gridCols = 2; // ট্যাবলেট ডিভাইসে 2 কলাম
    } else {
      this.gridCols = 4; // ডেস্কটপে 4 কলাম
    }
  }
}

Material Grid List এর অতিরিক্ত বৈশিষ্ট্য

  1. Responsive Grid: মিডিয়া কোয়েরি বা ডাইনামিক কলাম সংখ্যা পরিবর্তন করে আপনি রেসপন্সিভ ডিজাইন তৈরি করতে পারবেন।
  2. Tile Sizing: সেলের আকার কাস্টমাইজ করতে rowHeight এবং cols প্রপার্টি ব্যবহার করা হয়।
  3. Tile Content: প্রতিটি mat-grid-tile এ কন্টেন্ট যোগ করা সম্ভব, যেমন ছবি, টেক্সট বা বিভিন্ন উপাদান।
  4. Gutter Size: সেলগুলোর মাঝে স্পেস (gutter) কাস্টমাইজ করা যায় gutterSize প্রপার্টির মাধ্যমে।
<mat-grid-list cols="3" gutterSize="16px">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
  <mat-grid-tile>Tile 3</mat-grid-tile>
</mat-grid-list>

উপসংহার

Angular Material এর Material Grid List একটি শক্তিশালী এবং রেসপন্সিভ টুল, যা গ্রিড লেআউট তৈরি করতে সহায়ক। এটি সহজেই কাস্টমাইজযোগ্য এবং দ্রুত অ্যাপ্লিকেশন ডিজাইন তৈরি করতে সাহায্য করে। আপনি এতে ছবি, টেক্সট এবং অন্য উপাদানগুলো রেখে একটি আকর্ষণীয় UI তৈরি করতে পারেন। Grid List একটি চমৎকার উপায় বিভিন্ন ধরনের কন্টেন্ট সুশৃঙ্খলভাবে প্রদর্শন করার জন্য।

Content added By
Promotion